<template>
    <el-dialog title="理箱清单" :visible.sync="dialogForm" width="1100px">
        <el-row type="flex" justify="center">
            <h3>理箱清单</h3>
            <el-button class="load-position-btn" @click="handlePrint">打 印</el-button>
        </el-row>
        <el-form :inline="true" ref="form" :model="form" class="detail-form" label-width="120px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="船代：">
                        {{ form.accountUnit }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="结算月度：">
                        {{ form.accountMonth }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="发生日期：">
                        {{ form.startFeeTime }}
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-table :data="list" border stripe max-height="500" class="mt-10">
            <el-table-column prop="portName" label="作业港口"  min-width="110"></el-table-column>
            <el-table-column prop="containerId" label="箱号"  min-width="110"></el-table-column>
            <el-table-column prop="containerSize" label="尺寸"  min-width="110"></el-table-column>
            <el-table-column prop="containerType" label="箱型"  min-width="110"></el-table-column>
            <el-table-column prop="tradeType" label="内外贸"  min-width="110">
                <template slot-scope="scope">
                    {{ scope.row.tradeType | _filterTradeType }}
                </template>
            </el-table-column>
            <el-table-column prop="imOrEx" label="进出口"  min-width="110">
                <template slot-scope="scope">
                    {{ scope.row.imOrEx | _filterImportExport }}
                </template>
            </el-table-column>
            <el-table-column prop="sealNo" label="铅封号"  min-width="110"></el-table-column>
            <el-table-column prop="finishTime" label="施封日期"  min-width="110"></el-table-column>
            <el-table-column prop="planType" label="作业类型"  min-width="110">
                <template slot-scope="scope">
                    {{ scope.row.planType | _filterTsJobStatus }}
                </template>
            </el-table-column>
            <el-table-column prop="accountUnit" label="结算单位"  min-width="110"></el-table-column>
        </el-table>
    </el-dialog>
</template>

<script>
    import { getBalanceSpecialDetailList } from "@/api/balance/balance";

    export default {
        name: "loadForm",
        props:{
            form:{}
        },
        data() {
            return {
                list: [],
                dialogForm: false,
                params:''
            }
        },
        methods: {
            loadData(params) {
                this.params=params
                getBalanceSpecialDetailList(params).then(res => {
                    this.list = res.data.aaData
                })
            },
            handlePrint(){
                const origin = window.location.origin + window.location.pathname
                const route = `/#/Sp`
                window.open(`${origin}${route}?params=${JSON.stringify(this.params)}`);
            }
        }
    }
</script>

<style scoped>
    .load-position-btn {
        position: relative;
        right: -410px;
        top: 0px;
    }
</style>
